<template>
<div class="home">
    <div @click="increment">{{count}}</div>
    <div :style="{fontSize:size+'px',color:color}">reactive</div>
    <DomRef></DomRef>
    <ComDemo :name="'我是父组件传值'" @talk="talk" ref="comdemo"></ComDemo>
    <HelloWorld></HelloWorld>
    <HelloWorld></HelloWorld>
    <RouterAndVuex></RouterAndVuex>
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import DomRef from '@/components/DomRef.vue'
import ComDemo from '@/components/ComDemo.vue'
import RouterAndVuex from '@/components/RouterAndVuex.vue'
import {
    ref,
    reactive,
    toRefs,
    onMounted,
    provide
} from 'vue'
export default {
    name: 'Home',
    components: {
        DomRef,
        ComDemo,
        HelloWorld,
        RouterAndVuex
    },
    setup() {
        // 定义一个ref响应式对象
        const count = ref(0)
        // 如果定义多个响应式对象可以用reactive
        const state = reactive({
            size: 36,
            color: "red"
        })
        // 定义一个方法
        const increment = () => {
            count.value++
        }

        const comdemo = ref(null)
        onMounted(() => {
            // 得到子组件的值
            console.log(comdemo.value.str)
            // 触发字组件事件
            comdemo.value.talk()
        })
        const talk = (e) => {
            console.log(e)
        }

        // provide
        provide("injectmsg", "provide talk")
        return {
            count,
            comdemo,
            ...toRefs(state),
            increment,
            talk
        }
    },
    // components: {
    //   HelloWorld
    // }
}
</script>
